﻿@model EstimateShippingModel
@using SmartStore.Web.Models.ShoppingCart;
@if (Model.Enabled)
{
    <script type="text/javascript">
        $(function () {
            $("#@Html.FieldIdFor(model => model.CountryId)").change(function () {
                var selectedItem = $(this).val() || 0;

                var ddlStates = $("#@Html.FieldIdFor(model => model.StateProvinceId)");
                var estimateBox = $(this).closest(".estimate-shipping");

                var throbber = estimateBox.data("throbber");
                if (!throbber) {
                    throbber = estimateBox.throbber({ white: true, small: true, show: false }).data("throbber");
                }
                throbber.show();

                $.ajax({
                    cache: false,
                    type: "GET",
                    url: "@(Url.RouteUrl("GetStatesByCountryId"))",
                    data: { "countryId": selectedItem, "addEmptyStateIfRequired": "false" },
                    success: function (data) {
                        ddlStates.html('');
                        $.each(data, function (id, option) {
                            ddlStates.append($('<option></option>').val(option.id).html(option.name));
                        });
                        ddlStates.trigger("change");
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert('Failed to retrieve states.'); // TODO: Loc
                    },
                    complete: function () {
                        _.delay(function () { estimateBox.data("throbber").hide() }, 400);
                    }
                });
            });
        });
    </script>
    
    <div class="shipping">
        <div class="estimate-shipping cart-box well well-small">
            <h4 class="title">@T("ShoppingCart.EstimateShipping")</h4>

            <div class="hint muted">@T("ShoppingCart.EstimateShipping.Tooltip")</div>

            <div class="shipping-options form-vertical">
                <div class="control-group">
                    <label class="control-label" for="@Html.IdFor(x => x.CountryId)">
                        @Html.LabelFor(model => model.CountryId)
                    </label>
                    <div class="controls">
                        @Html.DropDownListFor(model => model.CountryId, Model.AvailableCountries, T("Address.SelectCountry").Text, new { @class = "country-input", style = "width: 100%" })
                        @Html.ValidationMessageFor(model => model.CountryId)
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="@Html.IdFor(x => x.StateProvinceId)">
                        @Html.LabelFor(model => model.StateProvinceId)
                    </label>
                    <div class="controls">
                        @Html.DropDownListFor(model => model.StateProvinceId, Model.AvailableStates, new { @class = "state-input", style = "width: 100%" })
                        @Html.ValidationMessageFor(model => model.StateProvinceId)
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="@Html.IdFor(x => x.ZipPostalCode)">
                        @Html.LabelFor(model => model.ZipPostalCode)
                    </label>
                    <div class="controls">
                        @Html.TextBoxFor(model => model.ZipPostalCode, new { @class = "zip-input" })
                        @Html.ValidationMessageFor(model => model.ZipPostalCode)
                    </div>
                </div>
                <div class="control-group">
                    <div class="controls">
                        <input type="submit" name="estimateshipping" value="@T("ShoppingCart.EstimateShipping.Button")" class="btn btn-warning estimate-shipping-button" />
                    </div>
                </div>
            </div>

            <div class="shipping-options">
                @if (Model.ShippingOptions.Any())
                {
                    <div>
                        @foreach (var shippingOption in Model.ShippingOptions)
                        {
                            <div class="shipping-option-item" style="margin-bottom: 8px">
                                <div class="option-name">
                                    @shippingOption.Name (@shippingOption.Price)
                                </div>
                                <div class="option-description muted">
                                    @Html.Raw(shippingOption.Description)
                                </div>
                            </div>
                        }
                    </div>
                }
                @if (Model.Warnings.Count > 0)
                {
                    <div class="alert alert-error" style="margin: 0 0 12px 0">
                        @for (int i = 0; i < Model.Warnings.Count; i++)
                        {
                            <p>@Model.Warnings[i]</p>
                        }
                    </div>
                }
            </div>
        </div>

        <div class="well well-small hide"> <!-- TODO: (mc) temporarily hidden, wrong resource key! -->
            @Html.Raw(String.Format(T("ShoppingCart.ShippingInfoLink"), Url.RouteUrl("Topic", new { SystemName = "shippinginfo" })))
        </div>
    </div>
}